آموزش توسعه برنامه کاربردی با React و Bootstrap [ویدئو]

سرفصل ها و درس ها

شروع به کار با Create-React-App Getting Started With Create-React-App

• بررسی اجمالی دوره Course Overview

• پیش نیازها و نرم افزار Prerequisites and Software

• فایل های تمرین Exercise Files

• پیش نمایش برنامه تمام شده Previewing the Finished App

پایه گذاری: ایجاد ناوبری Laying the Foundation: Building Out the Navigation

• Create-React-App را نصب و اجرا کنید Install and Run Create-React-App

• آشنایی با سرور JSON Introduction to JSON Server

• استفاده از Faker برای تولید داده های تست تصادفی Using Faker to Generate Random Test Data

• React Component State React Component State

• چرخه حیات کامپوننت React React’s Component Life Cycle

• ایجاد یک React Component با ES6 Creating a React Component with ES6

• واکشی داده ها با Axios Fetching Data with Axios

• تست کد ما Testing Our Code

• بررسی ساختار سایت Reviewing the Site’s Structure

• افزودن متغیر Navbar Adding the Navbar Placeholder

• خرد کردن مؤلفه خانه Stubbing the Home Component

• خرد کردن چرخ فلک تصویر Stubbing the Image Carousel

• از بین بردن مرورگر خودرو Stubbing the Vehicle Browser

• ایجاد پاورقی Creating the Footer

• مقدمه ای بر React Router Introduction to React Router

• کار با React Router Working with React Router

ایجاد اجزای React ES6 خودتان Creating Your Own React ES6 Components

• بررسی اجمالی Reactstrap Reactstrap Overview

• اضافه کردن ReactstrapNavbar Adding a ReactstrapNavbar

• تغییر کد نمونه نوار نوار Changing the Navbar Sample Code

• افزودن فونت عالی Adding Font Awesome

• مقدمه ای بر React Properties Introduction to React Properties

• ساخت نوار ناوبر مبتنی بر داده Making the Navbar Data-Driven

• اضافه کردن چرخ فلک تصویر Adding an Image Carousel

• کپی کردن فایل های دارایی Copying the Asset Files

• استفاده از روتر React with Properties Using React Router with Properties

• چرخ فلک سایت مبتنی بر داده Data-Driven Site Carousel

• استفاده از Layout Components برای ساخت مرورگر خودرو Using Layout Components to Build the Vehicle Browser

• ساخت مرورگر خودرو مبتنی بر داده Making the Vehicle Browser Data-Driven

UX با اجزای تودرتو آسان شده است UX Made Easy with Nested Components

• فرم ها در مقابل گروه های ورودی Forms versus Input Groups

• خرد کردن مؤلفه یاب فروشنده Stubbing the Dealer Locator Component

• کار با گروه های ورودی Working with Input Groups

• مدیریت رویدادهای گروه ورودی Input Group Events Handlers

• جزء جدول The Table Component

• کار با لیست ها Working with Lists

• موارد را با نشان فهرست کنید List Items with Badges

• افزودن فرم استعلام – قسمت 1 Adding an Inquiry Form – Part 1

• افزودن فرم استعلام - قسمت 2 Adding an Inquiry Form – Part 2

• ارسال با Axios – قسمت 1 Posting with Axios –Part 1

• ارسال با Axios – قسمت 2 Posting with Axios –Part 2

ساخت و انتشار برنامه ES6 React با Babel Building and Publishing Your ES6 React App with Babel

• مولفه جزئیات خودرو را ایجاد کنید - قسمت 1 Create the Vehicle Detail Component – Part 1

• مولفه جزئیات خودرو را ایجاد کنید - قسمت 2 Create the Vehicle Detail Component – Part 2

• کامپوننت ساخت و قیمت (برگه ها) – قسمت 1 The Build and Price Component (Tabs) – Part 1

• کامپوننت ساخت و قیمت (برگه ها) - قسمت 2 The Build and Price Component (Tabs) – Part 2

• محفظه رسانه در حال فرو ریختن - قسمت 1 Collapsing Media Container – Part 1

• محفظه رسانه در حال فرو ریختن - قسمت 2 Collapsing Media Container – Part 2

• انتخاب یک مدل - قسمت 1 Pick a Model – Part 1

• انتخاب یک مدل - قسمت 2 Pick a Model – Part 2

• انتخاب کننده رنگ Color Picker

• کشویی Engine Picker - قسمت 1 Engine Picker Dropdown – Part 1

• کشویی Engine Picker - قسمت 2 Engine Picker Dropdown –Part 2

• مدال ها Modals

• هشدارهای پاکسازی Cleaning Up Warnings

• ساخت و نتیجه گیری تولید Production Build and Conclusion